<template>
  <v-app-bar app color="white" height="78" class="d-flex elevation-0">
    <div class="w-100">
      <div class="h-100 d-flex align-center nav-wrap mx-auto">
        <div class="d-flex align-center cursor-pointer" @click="routerTo(headerMenus[0],0)">
          <svg-icon icon="logo" width="34" height="34"></svg-icon>
        </div>
        <div class="d-flex align-center header-container ml-auto justify-space-between">
          <div class="d-flex align-center">
            <div class="d-flex ml-3  align-center">
              <div v-for="(item, index) in headerMenus" :key="index" @click="routerTo(item, index)"
                   :class="{ 'text-primary active-nav': activeNav === index }"
                   class="font-size-18 px-5 cursor-pointer nav-item d-flex align-center">
                {{ item.title }}
              </div>
            </div>
          </div>
          <div class="d-flex align-center">
            <div class="cursor-pointer cursor-pointer d-flex align-center px-2 py-1 rounded" :class="{ 'text-primary': activeNav === 11 }"
                 @click="toPay">
              <svg-icon icon="icon_vip" width="30" height="30" class="text-white cursor-pointer"></svg-icon>
              <span class="pr-2 font-size-18">
                   充值
          </span>
            </div>
            <div class="ml-4">
              <UserHeader :activeNav="activeNav" @changeNav="changeActiveNav" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-app-bar>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import {ref} from "vue";
const route = useRoute();
const router = useRouter();

const activeNav = ref(0);

function routerTo(item, index){
  activeNav.value = index;
  router.push({name:item.routerName});
}
function toPay(){
  activeNav.value = 11;
}

function changeActiveNav(val){
  activeNav.value = val;
}


const headerMenus = [
  {
    title: '首页',
    routerPath: "/",
    routerName: "Home",
  },
  {
    title: '心理测评',
    routerPath: "/assessmentList",
    routerName: "AssessmentList",
    params: {
      category: 0
    },
  },
  {
    title: '我的报告',
    routerPath: "/reportList",
    routerName: "ReportList",
    params: {
      category: 0
    },
  },
  {
    title: '关于我们',
    routerPath: "/",
    routerName: "",
    params: {
      category: 0
    },
  }
]
</script>

<style scoped lang="scss">
.nav-wrap {
  max-width: $main-width;

  .header-container {
    width: $main-width;

    .nav-item {
      height: $header-height;
    }

    .active-nav {
      position: relative;

      &:after {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        content: '';
        background-color: currentColor;
        width: 50px;
        height: 2px;
        border-radius: 2px;
      }
    }
  }
}
</style>
